import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Modal, Form, Input, Button, message } from 'antd';
import { applyOutProduct } from '@/api/product/index';

const ApplyOutProductModal = ({ visible, item, onClose, onSuccess }) => {
  const [form] = Form.useForm();
  const newItem = { ...item }

  useEffect(() => {
    const handleApplyId = () => {
      const name = JSON.parse(localStorage.getItem('userInfo') || {}).name
      form.setFieldsValue({
        id: newItem.id,
        product_in_warehouse_number: newItem.product_in_warehouse_number,
        product_name: newItem.product_name,
        product_single_price: newItem.product_single_price,
        product_out_number: '',
        product_out_id: '',
        product_out_apply_person: name,
        apply_memo: '',
      });
    };
    handleApplyId()
  }, [newItem]);

  const handleApplyProduct = async (value) => {
    const res = await applyOutProduct({ ...newItem, ...value });
    if (res.status === 0) {
      message.success('产品申请出库成功');
      onSuccess();
      onClose();
    } else {
      message.error('产品申请出库失败');
      onClose();
    }
  };

  return (
    <Modal
      title="申请出库"
      open={visible}
      onCancel={onClose}
      footer={null}
      width={600}
      destroyOnClose
    >
      <div className="product-name">您申请出库的产品是: {newItem.product_name}</div>
      <div className="product-name">该产品的库存还有: {newItem.product_in_warehouse_number}</div>
      <div className="dialog-content">
        <Form
          form={form}
          layout="vertical"
          onFinish={handleApplyProduct}
          initialValues={newItem}
        >
          <Form.Item
            name="product_out_id"
            label="申请出库编号"
            rules={[{ required: true, message: '请输入申请出库编号' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="product_out_number"
            label="出库数量"
            rules={[{ required: true, message: '请输入申请出库数量' }]}
          >
            <Input type="number" />
          </Form.Item>

          <Form.Item
            name="product_out_apply_person"
            label="出库申请人"
            rules={[{ required: true, message: '请输入申请人' }]}
          >
            <Input disabled />
          </Form.Item>

          <Form.Item
            name="product_single_price"
            label="产品单价"
          >
            <Input disabled />
          </Form.Item>

          <Form.Item
            name="apply_memo"
            label="申请出库备注"
          >
            <Input.TextArea rows={2} />
          </Form.Item>
          <Form.Item style={{ textAlign: 'right' }}>
            <Button
              type="primary"
              htmlType='submit'
            >
              确定
            </Button>
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

ApplyOutProductModal.propTypes = {
  visible: PropTypes.bool.isRequired,
  item: PropTypes.object.isRequired,
  onClose: PropTypes.func.isRequired,
  onSuccess: PropTypes.func.isRequired,
};

export default ApplyOutProductModal;
